<template>
	<div class="wrap">
		<div class="page-title">
			<h3>关机/重启</h3>
		</div>
		<div class="table-wrap">
			<table>
				<thead class="thead-bottom-line">
					<tr>
						<th style="width: 120px;">设备操作</th>
						<th style="width: 900px;"></th>
						<th style="width: 120px;">操作</th>
					</tr>
				</thead>

				<tbody>
					<tr>
						<td>重启/关机</td>
						<td>
							<input type="radio" name="radio" value="reboot"/><label>重启</label>
							<input type="radio" name="radio" value="halt" style="margin-left: 50px;" /><label>关机</label>
							<span>（提示：电源延迟开关，长按5秒关机）</span>
						</td>
						<td><button @click="command()" class="surebtn button button--aylen" data-toggle='popover' data-container="body" data-placement="bottom" data-content="请先选择一个操作">确定</button></td>
					</tr>
				</tbody>
			</table>
		</div>
		<Modals :id ="'modal'" :title ="'提示'"  @sentErrorMsg = "getErrorMsg" @modalEvent ="doCommand()">
				<div slot ="modal_content">	
						<p style="font-size:16px;">{{types == "halt"?"是否执行关机操作":"设备即将重启，是否现在重启"}}</p>
				</div>
		</Modals>
		<noticeModal :id="'notice'" :title="'提示'" :status ="requestStatus" :errorMsg="errorMsg" :Msg="msg">
			<div slot="modal_footer"></div>
		</noticeModal>
	</div>
</template>
<script>
	import SystemService from 'services/systemService'
	import noticeModal from 'components/common/noticeModal'
	import Modals from 'components/common/Modals'
	export default {
		components:{
			noticeModal,
			Modals
		},
		data() {
			return {
				code:"",
				types:"",
				requestStatus:'',
				result:'',
				errorMsg:'',
				msg:''
			}
		},
		methods:{
			getErrorMsg(msg) {
					this.errorMsg = msg
			},
			command() {
				let cmd = $("input[name='radio']:checked").val();
				if ( cmd!="reboot" && cmd!="halt" ) {
					this.code = "no"
					$(".surebtn").popover('show')
					setTimeout(function () {
						$('.surebtn').popover('destroy')
					}, 1500)
				} else if ( cmd == "reboot" ) {
					this.errorMsg=''
					this.types = "reboot"
					$("#modal").modal('show')
				} else if ( cmd == "halt" ) {
					this.types = "halt"
					this.errorMsg=''
					$("#modal").modal('show')
				}
			},
			doCommand() {
				$("#modal").modal('hide')
				let cmd = $("input[name='radio']:checked").val();
				if ( cmd == "reboot" ) {
					SystemService.command("reboot")
					.then((res) => {
						
						if (res.errcode === 0) {
							//重启等待
							this.requestStatus = "ok"
							$("#notice").modal('show');
							this.msg = '系统正在重启，请稍后……'
							let timer = setInterval(checkStart,10000);
							function checkStart() {
								SystemService.checkStart()
								.then((res) => {
									
									if (res.errcode === 0) {
										window.clearInterval(timer);
										window.location.href = '/'
									}
								})
							}							
						} else {
							this.requestStatus = "error"
							this.errorMsg = "本次操作执行失败！"
							$("#notice").modal('show');
							setTimeout(function () {
								$("#notice").modal('hide');
							}, 1000);
						}
					})
				} else if ( cmd == "halt" ) {
					SystemService.command("halt")
					.then((res) => {
						
						if (res.errcode === 0) {
							this.requestStatus = "ok"
							$("#notice").modal('show');
							this.msg = '操作执行！（电源延迟开关，长按5秒关机。关机后本页面失效。）'
							setTimeout(function () {
								$("#notice").modal('hide');
							}, 5000);
						} else {
							this.requestStatus = "error"
							this.errorMsg = "本次操作执行失败！"
							$("#notice").modal('show');
							setTimeout(function () {
								$("#notice").modal('hide');
							}, 1000);
						}
					})
				}
			}
		}
	}
</script>
<style scoped lang="less">
	.wrap {
		margin: 30px 0 0 30px;
		padding-bottom: 10px;
		background: #FFFFFF;
	}
	.table-wrap {
		margin: 20px;
	}
	table{
		border-collapse:collapse
	}
  table tbody tr	td{
		height: 40px;
	}
	th:nth-child(2),
	td:nth-child(2) {
		text-align: left;
		padding: 0 20px;
	}
	.surebtn {
		width: 50px;
		height: 20px;
		color: #FFFFFF;
		border-radius: 5px;
		background: #f5b72e;
	}
	input {
		margin: 5px 8px;
	}
	label,
	span{
		padding-top: 5px;
	}
	input[name='radio']{
		margin-top: 2px;
	}
</style>